<template>
  <div>
    <a-table :data="paramList" :columns="columns"  :dataSource="paramList" :pagination="false" :border="true" style="width: 100%">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex==='key'">
          <div v-if="record.keyType !== 'custom'">
            <span class="required">{{ record.required ? '*' : '' }}</span>
            {{ record.key }}
          </div>
          <a-input
            v-else
            v-model:value="record.key"
            placeholder="请输入"
            size="small"
            @change="handleKeyChange($event, record)"
          >
          </a-input>
        </template>

        <template v-if="column.dataIndex==='value'">
          <value-collector
            class="value-select"
            :value="param[record.key]"
            :context="context"
            :types="types"
            :defaultValue="defaultValue"
            :lf="lf"
            @change="handleValueChange($event, record)"
          ></value-collector>
        </template>
        <template v-else-if="column.dataIndex==='action'">
          <a-button
            icon="a-icon-delete"
            circle
            type="danger"
            size="mini"
            :disabled="!!record.required"
            @click="removeParam(record)"
          ></a-button>
        </template>
      </template>
    </a-table>
    <a-link type="primary" :underline="false" class="add-button" @click="addCustom">
      <i class="a-icon-circle-plus-outline"></i>
      添加自定义参数
    </a-link>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, Ref, ref, unref, defineProps, watch, defineExpose, defineEmits , computed} from 'vue';
import { findIndex } from 'lodash-es'
import valueCollector from '../valueCollector/index.vue'

const list = ref([]);
const types = ref(['input', 'dataSource', 'dataConvert', 'urlParam', 'initParam']);
const param = ref({});

const columns = [
  {
    title: 'KEY',
    dataIndex: 'key',
    key: 'key',
  },
  {
    title: 'VALUE',
    dataIndex: 'value',
    key: 'value',
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
  },
];

// 定义组件接收的参数
const props = defineProps({
  context: Object,
  lf: Object,
  defaultValue: [String, Number, Boolean, Object, Array],
  paramList: Array,
  value: {
    type: Array,
    default: () => []
  }
});

const emits = defineEmits(['change']);

watch(
  () => props.value,
  (val) => {
    const p = convertParam(val);
    param.value = p;
  },
  { deep: true, immediate: true }
);

/** 返回的param格式
     queryParams:
     [
       {
          key: 'page', // 参数名称
          paramType: 'int', // 参数类型
          value: { // 返回的是一个值收集器的内容
            type: 'component',
            componentId: '111', // 页面组件Id' 
            field: 'id', // 如果组件的属性值是对象，则可以通过field获取对象的字段
            prop: 'name', // 属性值，调用model的getProps('name')获取属性值
            dataType: '', // 该值的数据类型，由物料定义的该propType
          }
       }
     ]
    **/
function formatParam() {
  const keys = Object.keys(param.value);
  const data = keys.map((key) => {
    return {
      key: key,
      paramType: param.value[key].paramType,
      keyType: key ? param.value[key].keyType : 'custom',
      value: param.value[key]
    }
  });
  return data;
}

function convertParam(data) {
  const param = {};
  data.map((item) => {
    param[item.key] = item.value
  });
  return param;
}

function handleValueChange(e, row) {
  const key = row.key;
  param.value[key] = e;
  param.value[key].paramType = row.paramType;
  param.value[key].keyType = row.keyType;
  const param = formatParam();
  emits('change', param);
}

function handleKeyChange(e, row) {
  console.log('2', row);
  const key = row.key;
  param.value[key] = row.value || {};
  param.value[key].keyType = row.keyType;
  const param = formatParam();
  emits('change', param);
}

function removeParam(row) {
  const idx = findIndex(props.paramList, (o) => o.key === row.key);
  props.paramList.splice(idx, 1);
  delete param.value[row.key];
  const param = formatParam();
  emits('change', param);
}

function addCustom() {
  const item = {
    key: '',
    value: '',
    required: 0,
    keyType: 'custom'
  };
  props.paramList.push(item);
}

</script>

<style scoped lang="less">
:deep(.el-select) {
  width: 100%;
}
.required {
  color: #f56c6c;
  width: 6px;
  display: inline-block;
  text-align: right;
}
.add-button {
  margin-top: 10px;
}
</style>
